import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss'],
  animations: [
    trigger('flyInOut', [
      state('open', style({
        opacity: 1
      })),
      state('closed', style({
        opacity: 0
      })),
      transition('open => closed', [
        animate('0s')
      ]),
      transition('closed => open', [
        animate('1s')
      ])
    ])
  ]
})
export class IndexComponent implements OnInit {

  public sliderIndex: number; // 滑动组件地步index
  public sliderPics: Array<any>; // 滑动组件图片数组
  public flyInOutStatus: string; // 转场动画
  constructor() {
    this.flyInOutStatus = 'open';
    this.sliderIndex = 3;
    this.sliderPics = [
      {
        left: 'https://mofang.ruanmei.com/v2/images/slogan_1.png',
        right: 'https://mofang.ruanmei.com/v2/images/preview_1.png'
      },
      {
        left: 'https://mofang.ruanmei.com/v2/images/slogan_2.png',
        right: 'https://mofang.ruanmei.com/v2/images/preview_2.png'
      },
      {
        left: 'https://mofang.ruanmei.com/v2/images/slogan_3.png',
        right: 'https://mofang.ruanmei.com/v2/images/preview_3.png'
      },
      {
        left: 'https://mofang.ruanmei.com/v2/images/slogan_4.png',
        right: 'https://mofang.ruanmei.com/v2/images/preview_4.png'
      }
    ];
  }

  ngOnInit(): void {
    this.startAnimation();
  }

  public sliderAnimation(index) {
    this.sliderIndex = index;
    this.flyInOutStatus = 'closed';
    const ti = setTimeout(() => {
      this.flyInOutStatus = 'open';
      clearTimeout(ti);
    }, 10);
  }

  public startAnimation() {
    const ti = setInterval(() => {
      this.sliderAnimation(this.sliderIndex);
      this.sliderIndex++;
      if (this.sliderIndex > 3) {
        this.sliderIndex = 0;
      }
    }, 4000);
  }
}
